{% stylesheet %}
  .block_collection_blogs_list .blog_list ul {
    display: grid;
    row-gap: 40px;
    column-gap: 30px;
    grid-template-columns: repeat(2, calc(50% - 15rem));
  }

  .block_collection_blogs_list .blog_list_3 ul {
    grid-template-columns: repeat(3, calc(33.3333% - 20px));
  }

  .block_collection_blogs_list .blog_list_4 ul {
    grid-template-columns: repeat(4, calc(25% - 22.5px));
  }

  .block_collection_blogs_list .blog_list_5 ul {
    grid-template-columns: repeat(5, calc(20% - 24px));
  }

  .block_collection_blogs_list .blog_list li {
    list-style-type: none;
    overflow: hidden;
  }

  .block_collection_blogs_list .blog_iamge {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .block_collection_blogs_list .blog_iamge .block_iamge_pic {
    width: 100%;
    height: 100%;
  }

  .block_collection_blogs_list .blog_iamge img {
    width: 100%;
  }

  .block_collection_blogs_list .blog_iamge .block_iamge_name {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 24px;
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
  }


  .block_collection_blogs_list .blog_name {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--title_color);
    font-size: var(--product_font_size);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .block_collection_blogs_list .blog_descript {
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--detail_color);
  }

  .block_collection_blogs_list .blog_more {
    color: var(--detail_color);
    text-decoration: underline;
    transition: all 0.3s;
  }

  .block_collection_blogs_list .blog_more:hover {
    color: var(--title_color);
  }

  .block_collection_blogs_list .block_collection_blogs_list_more {
    text-align: center;
    margin-top: calc(var(--general_layout_spacing) * 0.5);
  }

  .block_collection_blogs_list .block_collection_blogs_list_more a {
    margin: 0;
  }

  @media (max-width: 767px) {
    .block_collection_blogs_list .blog_list ul {
      display: block;
    }
    .block_collection_blogs_list .blog_list li {
      margin-bottom: 30px;
    }
    .block_collection_blogs_list .blog_list li:last-child {
      margin-bottom: 0;
    }
    .block_collection_blogs_list .blog_iamge {
      margin-bottom: 20px;
    }
  }
  .block_collection_blogs_list_more {
    text-algin: center;
  }
{% endstylesheet %}

{% assign textAlign = 'left, center, right' | split: ', ' %}
{% assign index = section.settings.text_alignment | abs %}
{% assign defaultImageEmpty = 'empty.png' | public_asset_abs_url %}
{% assign defaultImageLoading = 'empty_loading.png' | public_asset_abs_url %}
<div class="block_collection_blogs_list">
  <div class="container_wrapper {% if section.settings.full_screen %}full_container_wrapper{% endif %}">
    {% include 'block_title', title: section.settings.title, detail: section.settings.detail %}
    <!-- 1fr -->
    <div class="blog_list blog_list_{{ section.settings.pc_number }}">
      <ul style=" grid-template-columns: repeat({{ section.settings.pc_number  }}, 1fr);">
        {% assign collection_ids = section.blocks | get_array_values: "collection" | get_array_values: "id" | join: "," %}

        {% if section.blocks.size %}
          {% get_news ids = {collection_ids} %}
          {% for block in section.blocks %}
            {% assign id = block.collection.id %}
            {% if  news[id].size > 1 %}
                {% assign item = news[id] %}
                
              <li style="text-align: {{ textAlign[index]  }} ;">
                {% if section.settings.cover_picture %}
                  {%- if item.image_alt == "" -%}
                    {% assign article_alt = item | image_alt:'news'   %}
                  {%- else -%}
                    {% assign article_alt = item.image_alt %}
                  {%- endif -%}
                  <a class="blog_iamge" href="/news/{{ item.handle }}">
                    <img class="lazyload" data-src="{{item.src}}" src="{{defaultImageLoading}}" alt="{{ article_alt }}">
                  </a>
                {% endif %}
                <a class="blog_name" href="/news/{{ item.handle }}">{{ item.title }}</a>
                {% if section.settings.blog_descript %}
                  <div class="blog_descript line-clamp2" style="text-align: {{ textAlign[index]  }} ;">
                    {{ item.descript }}
                  </div>
                {% endif %}
                {% if section.settings.read_now %}
                  <a class="blog_more" href="/news/{{ item.handle }}">{{ section.settings.read_now }}</a>
                {% endif %}
              </li>
            {% else %}
              <li style="text-align: {{ textAlign[index] }} ;">
                {% if section.settings.cover_picture %}
                  <a class="blog_iamge" href="javascript:;" data-tips="Please select blog">
                    <img src="{{ defaultImageEmpty }}">
                  </a>
                {% endif %}
                <a class="blog_name" href="javascript:;" data-tips="Please select blog"
                  >the printing and typesetting industry</a
                >
                {% if section.settings.blog_descript %}
                  <div class="blog_descript" style="text-align: {{ textAlign[index] }} ;">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                  </div>
                {% endif %}
                {% if section.settings.read_now %}
                  <a class="blog_more" href="javascript:;" data-tips="Please select blog">
                    {{- section.settings.read_now -}}
                  </a>
                {% endif %}
              </li>
            {% endif %}
          {% endfor %}
        {% else %}
          {% for i in (1..section.settings.pc_number) %}
            <li style="text-align: {{ textAlign[index] }} ;">
              {% if section.settings.cover_picture %}
                <a class="blog_iamge" href="javascript:;" data-tips="Please select blog">
                  <img src="{{ defaultImageEmpty }}">
                </a>
              {% endif %}
              <a class="blog_name" href="javascript:;" data-tips="Please select blog"
                >the printing and typesetting industry</a
              >
              {% if section.settings.blog_descript %}
                <div class="blog_descript" style="text-align: {{ textAlign[index] }} ;">
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                </div>
              {% endif %}

              {% if section.settings.read_now %}
                <a class="blog_more" href="javascript:;" data-tips="Please select blog">
                  {{- section.settings.read_now -}}
                </a>
              {% endif %}
            </li>
          {% endfor %}
        {% endif %}
      </ul>
    </div>
    {% if section.settings.more_text != '' %}
      <div class="block_collection_blogs_list_more">
        <a class="secondary_btn" href="/news">
          {{- section.settings.more_text -}}
        </a>
      </div>
    {% endif %}
  </div>
</div>


{% schema %}
{
  "tag": "section",
  "class": "block_collection_blogs_list",
  "is_global": false,
  "name": {
    "zh_CN": "博客专辑列表",
    "en_US": "Blogs Album List"
  },
  "max_blocks": 10,
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "placeholder": {
        "zh_CN": "请输入标题",
        "en_US": "Please enter title"
      },
      "default": "News"
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述",
        "en_US": "Short description"
      },
      "placeholder": {
        "zh_CN": "请输入描述",
        "en_US": "Please enter a description"
      },
      "default": ""
    },
    {
      "type": "card_switch",
      "id": "full_screen",
      "label": {
        "zh_CN": "宽度铺满",
        "en_US": "Spread the width"
      }
    },
    {
      "type": "card_switch",
      "id": "cover_picture",
      "label": {
        "zh_CN": "显示封面图片",
        "en_US": "Show cover image"
      },
      "default": true
    },
    {
      "type": "card_switch",
      "id": "blog_descript",
      "label": {
        "zh_CN": "显示简短描述",
        "en_US": "Show a short description"
      }
    },
    {
      "type": "card_select",
      "id": "text_alignment",
      "label": {
        "zh_CN": "文字对齐方式",
        "en_US": "Text alignment"
      },
      "option": [
        {
          "label": {
            "zh_CN": "左对齐",
            "en_US": "Left aligned"
          },
          "value": "0"
        },
        {
          "label": {
            "zh_CN": "居中",
            "en_US": "In the center"
          },
          "value": "1"
        },
        {
          "label": {
            "zh_CN": "右对齐",
            "en_US": "Right align"
          },
          "value": "2"
        }
      ],
      "default": "0"
    },
    {
      "type": "card_slider",
      "id": "pc_number",
      "max": "5",
      "min": "2",
      "label": {
        "zh_CN": "每排数量",
        "en_US": "Number per row"
      },
      "info": {
        "zh_CN": "只对pc有效",
        "en_US": "PC only"
      },
      "default": "3"
    },
    {
      "type": "card_input",
      "id": "read_now",
      "label": {
        "zh_CN": "阅读全文文案",
        "en_US": "Read the full text"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "查看更多文案",
        "en_US": "Text of view more"
      },
      "id": "more_text"
    },
    {
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
  ],
  "blocks": [
    {
        "name": {
            "zh_CN": "选择专辑",
            "en_US": "Select collection"
        },
        "type": "collection-item",
        "settings": [
            {
                "type": "card_album",
                "label": {
                    "zh_CN": "选择专辑",
                    "en_US": "Select collection"
                },
                "default": {
                    "id": "",
                    "title": ""
                },
                "id": "collection"
            }
        ]
    }
  ],
  "default": {
    "settings": {
      "title": "News",
      "detail": "",
      "full_screen": false,
      "cover_picture": true,
      "blog_descript": true,
      "text_alignment": "1",
      "pc_number": "3",
      "read_now": "Read More >",
      "more_text": "View More"
    },
    "blocks": [
        {
            "collection": {
                "id": "",
                "title": ""
            },
            "block_type": "collection-item"
        },
        {
            "collection": {
                "id": "",
                "title": ""
            },
            "block_type": "collection-item"
        },
        {
            "collection": {
                "id": "",
                "title": ""
            },
            "block_type": "collection-item"
        }
    ]
  },
  "icon": "icon-bokeliebiao"
}
{% endschema %}
